import React from 'react'
import { View, StyleSheet, Text, Image } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import BasePage from 'src/pageP/base/base-page/index'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import ActionSheetModal from 'src/components/modal/ActionSheetModal'
import { openAlums, openCamera } from 'src/utils/ImagePickerUtil'
import { CommonToast } from 'src/utils/ToastUtil'
class BaseUserAvator extends BasePage {
  constructor (props) {
    super(props)
    this.state = {
      header: {},
      userAvator: null,
      mime: '',
      userName: '',
      gender: '',
      photoSelectShow: false
    }
    this.ActionSheetModalArr = [
      {
        label: '相册上传'
      },
      {
        label: '拍照上传'
      }
    ]
  }

  childRender () {
    const { photoSelectShow, gender, userName, userAvator } = this.state
    return (
      <View style={styles.container}>
        <CustomButton
          style={styles.userAvatorView}
          onPress={this._showPhotoSelect}
        >
          {userAvator ? (
            <CustomImage
              style={styles.userAvator}
              source={{ uri: userAvator }}
            />
          ) : (
            <CustomImage
              style={styles.avatorDefaultImg}
              source={require('@/imgC/userinfo/camera.png')}
            />
          )}
        </CustomButton>
        <View style={styles.nameSexView}>
          <Text style={styles.realNameText}>{userName}</Text>
          {gender === 'female' && <CustomImage
            style={styles.sexImg}
            source={require('@/imgC/userinfo/sex-select-girl.png')}
          />}
          {gender === 'male' && <CustomImage
            style={styles.sexImg}
            source={require('@/imgC/userinfo/sex-select-boy.png')}
          />}
        </View>
        {this.renderNextBtn()}
        <ActionSheetModal
          visible={photoSelectShow}
          onCancel={this._ActionSheetModalCancel}
          selectClick={this._ActionSheetModalClick}
          onModalHide={this._ActionSheetonModalHide}
          titleText={'添加照片'}
          selectArr={this.ActionSheetModalArr}
        />
      </View>
    )
  }

  renderNextBtn () {
    const { userAvator } = this.state
    return (
      <CustomButton
        style={[styles.nextView, userAvator && styles.nextViewEnable]}
        onPress={this.nextButtonClick}
      >
        <CustomImage
          style={styles.nextImg}
          source={require('@/imgC/userinfo/icon_white_ok.png')}
        />
      </CustomButton>
    )
  }

  _albumsSelect = () => {
    openAlums().then(image => {
      this.setState({
        userAvator: image.imgPath,
        mime: image.mime
      })
    })
  }

  _cameraSelect = () => {
    openCamera().then(image => {
      this.setState({
        userAvator: image.imgPath,
        mime: image.mime
      })
    })
  }

  _ActionSheetModalClick = () => {
    this._closePhotoSelect()
  }

  _ActionSheetonModalHide = index => {
    console.log('_ActionSheetonModalHide', index)
    if (!index) {
      return
    }
    switch (index - 1) {
      case 0:
        this._albumsSelect()
        break
      case 1:
        this._cameraSelect()
        break
      default:
        break
    }
  }

  _ActionSheetModalCancel = () => {
    this._closePhotoSelect()
  }

  _showPhotoSelect = () => {
    this.setState({
      photoSelectShow: true
    })
  }

  _closePhotoSelect = () => {
    this.setState({
      photoSelectShow: false
    })
  }

  nextButtonClick = () => {
  }
}

export default BaseUserAvator

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    position: 'relative'
  },
  userAvatorView: {
    width: ScaleS(135),
    height: ScaleS(135),
    backgroundColor: '#F3F3F3',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: ScaleS(68),
    marginTop: ScaleS(99)
  },
  userAvator: {
    width: ScaleS(135),
    height: ScaleS(135),
    borderRadius: ScaleS(68),
    resizeMode: 'cover'
  },
  avatorDefaultImg: {
    width: ScaleS(52),
    height: ScaleS(44)
  },
  nameSexView: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: ScaleS(40)
  },
  realNameText: {
    color: '#333333',
    fontSize: ScaleT(33),
    fontWeight: '600'
  },
  sexImg: {
    width: ScaleS(31),
    height: ScaleS(31),
    marginLeft: ScaleS(8)
  },
  nextView: {
    position: 'absolute',
    width: ScaleS(70),
    height: ScaleS(70),
    backgroundColor: 'rgba(255, 216, 16, 0.3)',
    alignItems: 'center',
    justifyContent: 'center',
    bottom: ScaleS(50),
    right: ScaleS(34),
    borderRadius: ScaleS(70)
  },
  nextViewEnable: {
    backgroundColor: 'rgba(255, 216, 16, 1)'
  },
  nextImg: {
    width: ScaleS(26),
    height: ScaleS(26)
  },
  nextImgOK: {
    width: ScaleS(26),
    height: ScaleS(26)
  },
  photoSelectView: {
    position: 'absolute',
    bottom: ScaleS(7),
    left: ScaleS(7),
    right: ScaleS(7),
    backgroundColor: 'transparent'
  },
  photoSelectTopVIew: {
    borderRadius: ScaleS(14),
    backgroundColor: '#F8F8F8',
    opacity: 0.82
  },
  photoSelectAddText: {
    color: '#8F8F8F',
    fontSize: ScaleT(13),
    fontWeight: '400'
  },
  photoLine: {
    height: ScaleS(1),
    backgroundColor: '#3F3F3F'
  },
  photoSelectItemView: {
    paddingVertical: ScaleS(15),
    justifyContent: 'center',
    alignItems: 'center'
  },
  photoSelectItemText: {
    color: '#007AFF',
    fontSize: ScaleT(20),
    fontWeight: '400'
  },
  cancelSelectView: {
    backgroundColor: 'white',
    borderRadius: ScaleS(14),
    paddingVertical: ScaleS(16),
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: ScaleS(8)
  },
  cancelText: {
    color: '#007AFF',
    fontSize: ScaleT(20),
    fontWeight: '400'
  }
})
